<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="box" style="width: 100%">
    <template class="tutu">
      <el-carousel indicator-position="outside" class="tu">
        <el-carousel-item v-for="(items,index) in list" :key="item" class="pic">
          <h3>
            <img :src="items.url">
          </h3>
          <img src="https://i01piccdn.sogoucdn.com/4db91ca622a83713">
        </el-carousel-item>
      </el-carousel>
    </template>


  <el-row style="background-color: gray;width: 100%;height:400px;font-family: cursive;border-radius: 15px;margin-top: 74px">
    <el-col :span="20" style="background-color: white;width: 100%;height:1911px;font-family: cursive;border-radius: 15px;">
      <div class="one">



        <div class="left">
          <div class="zi" style="font-size: 30px;margin-top: 60px">精彩活动 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多
          <div class="xian" style="width: 100%;height: 2px;background-color: #999999;margin-top: 10px"></div>
            <div class="jchd" style="width: 100%;height: 500px;background-color: white" >
              <el-row >
                <el-col :span="20" v-for="(o, index) in  zhibo " :key="o" :offset="index > 0 ? 0 : 0" >
                  <el-card :body-style="{ padding: '0px'}" style="width: 280px;height: 200px;margin-left: 10px;margin-top: 20px">
                    <img :src="o.aFengmian" class="image" style="width: 280px;height: 157px;;cursor: pointer;" title="中央电视台" @click="zhibo(o.aId)">
                    <div style=" margin: 0 auto">
                      <span style="margin: 0 auto;margin-left: 70px;margin-top: 20px">{{o.aName}}</span>
                      <div class="bottom clearfix">

                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>

          <div class="leftxia" style="background-color: white;width: 100%;height: 900px;margin-top: 400px">
            <div class="zi" style="font-size: 25px;margin-top: 100px">主播榜单 &nbsp;&nbsp;月榜|年榜</div>
          <div class="hengxian"style="width: 100%;height: 2px;background-color: white;margin-top: 5px"></div>
            <template>
              <el-table
                :data="zhuboredu"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="atId"
                  label="编号"
                  width="60%">
                </el-table-column>
                <el-table-column
                  prop="aTitle"
                  label="姓名"
                  width="140%">
                </el-table-column>
                <el-table-column
                  prop="aRedu"
                  label="热度"
                  width="90%">
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>

        <div class="toubu">电视台&nbsp;&nbsp;&nbsp;&nbsp;CCTV
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多
          <div class="xian"></div>
          <div class="zhongjian">
            <el-row >
              <el-col :span="6" v-for="(o, index) in cctvList" :key="o" :offset="index > 0 ? 0 : 0" >
                <el-card :body-style="{ padding: '0px'}" style="width: 300px;height: 250px;margin-left: 25px;margin-top: 35px">
                  <img :src="o.pic" class="image" style="width: 350px;height: 200px;cursor: pointer;" title="中央电视台" @click="dianshitai(o.id)">
                  <div style=" margin: 0 auto">
                    <span style="margin: 0 auto;margin-left: 58px;margin-top: 20px">{{o.name}}</span>
                    <div class="bottom clearfix">

                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>



        <div class="toubu1">直播&nbsp;&nbsp;&nbsp;&nbsp;LIVE
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多
          <div class="xian"></div>
          <div class="zhongjian">
            <el-row>
              <el-col :span="6" v-for="(o, index) in zhibolist" :key="o" :offset="index > 0 ? 0 : 0">
                <el-card :body-style="{ padding: '0px'}" style="width: 300px;height: 250px;margin-left: 25px;margin-top: 35px">
                  <img :src="o.aFengmian" class="image" style="width: 350px;height: 200px;cursor: pointer;":title="o.atitle"@click="zhiboshipin(o.aId)">
                  <div style=" margin: 0 auto">
                    <span style="margin: 0 auto;margin-left: 58px;margin-top: 20px">{{o.aName}}</span>
                    <div class="bottom clearfix">
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>




        <div class="toubu1">视频&nbsp;&nbsp;&nbsp;&nbsp;av
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多
          <div class="xian"></div>
          <div class="zhongjian">
            <el-row>
              <el-col :span="6" v-for="(o, index) in avlist" :key="o" :offset="index > 0 ? 0 : 0">
                <el-card :body-style="{ padding: '0px'}" style="width: 300px;height: 250px;margin-left: 25px;margin-top: 35px">
                  <img :src="o.vPic" class="image" style="width: 350px;height: 200px;cursor: pointer;":title="o.vName" @click="tiaoshipin(o.vId)">
                  <div style=" margin: 0 auto">
                    <span style="margin: 0 auto;margin-left: 58px;margin-top: 20px">{{o.vType}}</span>
                    <div class="bottom clearfix">

                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="right">
          <div class="zi" style="font-size: 30px;margin-top: 60px">精彩视频 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多
            <div class="xian" style="width: 100%;height: 2px;background-color: #999999;margin-top: 10px"></div>
            <div class="jchd" style="width: 100%;height: 1803px;background-color:white" >
              <el-row >
                <el-col :span="20" v-for="(o, index) in avlistfour " :key="o" :offset="index > 0 ? 0 : 0" >
                  <el-card :body-style="{ padding: '0px'}" style="width: 280px;height: 200px;margin-left: 10px;margin-top: 20px">
                    <img :src="o.vPic" class="image" style="width: 280px;height: 157px;cursor: pointer;" :title="o.vName"@click="tiaoshipin(o.vId)" >
                    <div style=" margin: 0 auto">
                      <span style="margin: 0 auto;margin-left: 58px;margin-top: 20px">{{o.vType}}</span>
                      <div class="bottom clearfix">
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>


          <div class="leftxia" style="background-color: #ffffff;width: 100%;height: 900px;margin-top: -1000px">
            <div class="zi" style="font-size: 25px;margin-top: 100px;cursor: pointer;">用户贡献榜单 &nbsp;&nbsp;月榜|年榜</div>
            <div class="hengxian"style="width: 100%;height: 2px;background-color: white;margin-top: 5px"></div>
            <template >
              <el-table
                :data="tableData"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="uId"
                  label="编号"
                  width="100%">
                </el-table-column>
                <el-table-column
                  prop="uName"
                  label="姓名"
                  width="100%">
                </el-table-column>
                <el-table-column
                  prop="uMoney"
                  label="活跃度"
                  width="100%">
                </el-table-column>

              </el-table>
            </template>
          </div>



        </div>
      </div>
    </el-col>
  </el-row>

    <div class="xian11" style="width: 100%;height:5px;background-color: #999999;margin-top: 1532px"></div>
  <div class="biaoge" style="width: 100%;height: 500px;margin-top:20px;background-color: white;background-image: url(https://shark2.douyucdn.cn/front-publish/live-master/assets/images/classify-bg_b47f9a5.webp)">
    <span style="font-size: 40px;font-family: cursive;border-radius: 15px;margin-left: 200px;color: red">热门分类:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全部>
    </span>
    <div class="xian11" style="width: 100%;height:5px;background-color: #999999;margin-top: 0px"></div>

<div class="nans " style="width: 94%; height: 450px;margin: 0 auto" >

  <el-row>
    <el-col :span="3" v-for="(o, index) in livetype" :key="o" :offset="index > 0 ? 0 : 0">
      <el-card :body-style="{ padding: '0px'}" style="width: 150px;height: 180px;margin-left: 44px;margin-top: 35px">
        <img :src="o.pic" class="image" style="width: 150px;height: 150px;cursor: pointer;":title="o.atName" @click="fenleia()">
        <div style=" margin: 0 auto">
          <span style="margin: 0 auto;margin-left: 36px;margin-top: 20px">{{o.atName}}</span>
          <div class="bottom clearfix">

          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</div>
  </div>

    <div class="nanshouhen" style="width: 70% ; height: 400px;background-color: green;margin: 0 auto" >
      <img src="http://qmgk0uvzn.hn-bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720210105191843.png" style="width: 100%;height: 400px;margin: 0 auto">
    </div>
    <div class="nanshouhen1" style="width: 100% ; height: 400px;background-color:#3f3f3f;margin: 0 auto" >
      <div class="nanshouhen" style="width: 70% ; height: 400px;background-color: #3f3f3f;margin: 0 auto" >
      <img src="http://qmgk0uvzn.hn-bkt.clouddn.com/QQ%E5%9B%BE%E7%89%8720210105191550.png" style="width: 100%;height: 400px;margin: 0 auto;">
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "banner",
  data(){
    return{
      avlistfour:[],
      avlist:[],
      zhuboredu:[],
      tableData:[],
      zhibo:[],
      zhibolist:[],
      livetype:[],
      cctvList:[],
      currentDate: new Date(),
      list:[
        {url: ('https://i01piccdn.sogoucdn.com/4db91ca622a83713')},
        {url: ('https://i01piccdn.sogoucdn.com/2350d8ef917bfcd0')},
        {url: ('https://i04piccdn.sogoucdn.com/b356142c174c3743')},
        {url: ('https://i01piccdn.sogoucdn.com/6e6bb889e37e9188')},
        {url: ('http://upload.mobiletrain.org/2020/1203/1606972505780.jpg')},
        {url: ('http://upload.mobiletrain.org/2020/0407/1586252001808.jpg')},
      ],

    }

  },
  methods:{
    tiaoshipin:function(id){
      this.$router.push({name:"videos",params:{id:id}})
    },
    fenleia:function (){
      this.$router.push("/fenlei")
    },
    //直播
    zhiboshipin:function (id){
      this.$router.push({name:"zhibo",query:{aId:id}})
    },
    //cctv电视台
    dianshitai:function (id){
      this.$router.push({name:"cctv",params:{id:id}})
    },
    zhibo:function (id){
      this.$router.push({name:"zhibo",params:{aId:id}})
    },

    findAllLiveType:function (){
      axios.get("http://localhost:7000/live-live/live/selecttypelimit").then(res=>{
        if(res.data.code==200) {
          this.livetype = res.data.data
          console.log(res.data+"dasdasdasfgsddfwsgedfrtfsdgftd")
        }

      })
    },
    selectAv:function (){
      axios.get("http://localhost:7000/live-live/videos/findStarShow").then(res=>{
        if(res.data.code==200){
          this.avlist=res.data.data
        }
      })
    },
    selectAvfour:function (){
      axios.get("http://localhost:7000/live-live/videos/findVideoType").then(res=>{
        if(res.data.code==200){
          this.avlistfour=res.data.data
        }
      })
    },
    selectAllCctv:function (){
      axios.get("http://localhost:7000/live-live/live/selectLive").then(res=>{
        if(res.data.code==200){
          this.cctvList=res.data.data
        }
      })
    },
    fingAllzhibo:function (){
      axios.get("http://localhost:7000/live-live/live/selectanchor").then(res=>{
        if(res.data.code==200){
          this.zhibolist=res.data.data
          console.log(this.zhibolist)
        }
      })
    },
    findAllanchor:function (){
      axios.get("http://localhost:7000/live-live/live/findAllanchor").then(res=>{
        if(res.data.code==200){
          this.zhibo=res.data.data
        }
      })
    },
    findAllmonney:function (){
      axios.get("http://localhost:7000/live-live/live/findAllmoney").then(res=>{
        if(res.data.code==200){
          this.tableData=res.data.data
        }
      })
    },
    redupaihang:function (){
      axios.get("http://localhost:7000/live-live/live/selectredu").then(res=>{
        if(res.data.code==200){
          this.zhuboredu=res.data.data
        }
      })
    },

  },mounted() {
    this.selectAllCctv();
    this.findAllLiveType();
    this.fingAllzhibo();
    this.findAllanchor();
    this.findAllmonney();
    this.redupaihang();
    this.selectAv();
    this.selectAvfour();

  }

}
</script>

<style scoped>
.xian{
  width: 100%;
  height: 2px;
  background-color: gray;
}
.zhongjian{
  width: 100%;
  height: 500px;
  background-color: white;
  float: left;
}
.toubu1{
  width: 70%;
  height: 44px;
  background-color: white;
  font-family: cursive;
  /*border-radius: 15px;*/
  float: left;
  font-size: 40px;
  margin-top: 600px;
}

.toubu{
  width: 70%;
  height: 44px;
  background-color: white;
  font-family: cursive;
  /*border-radius: 15px;*/
  float: left;
  font-size: 40px;
}
.right{
  width: 15%;
  height: 1904px;
  background-color: white;
  font-family: cursive;
  /*border-radius: 15px;*/
  float: left;
  margin-top: -690px;
}

.left{
  width: 15%;
  height: 1904px;
  background-color: white;
  font-family: cursive;
  /*border-radius: 15px;*/
  float: left;
}
.one{
  background-color: white;

}
.pic{
  width: 100%;
  height: 600px;

}
.pic img{
  width: 100%;
  height: 600px;

}
.tutu{

  height: 600px;
  float: left;
  margin-top: 100px;


}
.tu{
  width: 70%;
  height: 600px;
  margin: 0 auto;




}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;

}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.box{
  width: 100%;
  height: 672px;
  background-color: gray;
  background-image: url(https://sta-op.douyucdn.cn/nggsys/2021/01/04/94f9658b2628b8d3e35c8d46b86d8f88.jpg?x-oss-process=image/format,webp)
}

.box-content{
  width: 60%;
  height: 350px;
  background-color:white;
  margin: 0 auto;
}
.box-content img{
  width: 100%;
  height: 350px;

}




.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
